<script setup>
  // 表情包列表
  const emojiList = [
    { id: 1, remark: '😀', name: '嘿嘿' },
    { id: 2, remark: '😃', name: '哈哈' },
    { id: 3, remark: '😄', name: '大笑' },
    { id: 4, remark: '😁', name: '嘻嘻' },
    { id: 5, remark: '😆', name: '斜眼笑' },
    { id: 6, remark: '😅', name: '苦笑' },
    { id: 7, remark: '😂', name: '笑哭了' },
    { id: 8, remark: '🤣', name: '笑得满地打滚' },
    { id: 9, remark: '😊', name: '羞涩微笑' },
    { id: 10, remark: '🙃', name: '倒脸' },
    { id: 11, remark: '😉', name: '眨眼' },
    { id: 12, remark: '😍', name: '花痴' },
    { id: 13, remark: '🥰', name: '喜笑颜开' },
    { id: 14, remark: '😘', name: '飞吻' },
    { id: 15, remark: '😗', name: '亲亲' },
    { id: 16, remark: '😛', name: '吐舌' },
    { id: 17, remark: '🤪', name: '滑稽' },
    { id: 18, remark: '🤓', name: '书呆子脸' },
    { id: 19, remark: '😎', name: '墨镜笑脸' },
    { id: 20, remark: '🤩', name: '好崇拜' },
    { id: 21, remark: '🥳', name: '聚会笑脸' },
    { id: 22, remark: '😏', name: '得意' },
    { id: 23, remark: '😫', name: '累' },
    { id: 24, remark: '😩', name: '累死了' },
    { id: 25, remark: '🤔', name: '想一想' },
    { id: 26, remark: '😶', name: '沉默' },
    { id: 27, remark: '😐', name: '冷漠' },
    { id: 28, remark: '🙄', name: '翻白眼' },
    { id: 29, remark: '😮', name: '吃惊' },
    { id: 30, remark: '😪', name: '困' },
    { id: 31, remark: '🥴', name: '头眼昏花' },
    { id: 32, remark: '🤡', name: '小丑脸' },
    { id: 33, remark: '👏', name: '鼓掌' },
    { id: 34, remark: '🤝', name: '握手' },
    { id: 35, remark: '👍', name: '拇指向上' },
    { id: 36, remark: '👎', name: '拇指向下' },
    { id: 37, remark: '👌', name: 'ok' },
    { id: 38, remark: '🤙', name: '给我电话' }
  ]

  const props = defineProps({
    // 是否选择了图标
    hasContent: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['select', 'del'])

  // 选择表情
  const onEmojiClick = (item) => {
    emit('select', item)
  }

  const onClick = () => {
    if (!props.hasContent) return
    // 删除
    emit('del')
  }
</script>

<template>
  <scroll-view scroll-y>
    <view class="emoji">
      <!-- 标题 -->
      <view class="emoji-title">
        <text>全部表情</text>
      </view>
      <!-- 列表 -->
      <view class="emoji-list">
        <view
          class="emoji-item"
          v-for="item in emojiList"
          :key="item.id"
          @click.stop="onEmojiClick(item)"
        >
          <text class="emoji-item__text">{{ item.remark }}</text>
        </view>
      </view>
    </view>
    <image
      class="btn_del"
      :src="`https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/message/shanchu-${props.hasContent ? 'active' : 'default'}.png`"
      mode="scaleToFill"
      @click.stop="onClick"
    />
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  .emoji {
    position: relative;
    box-sizing: border-box;
    height: 490rpx;
    padding: 10rpx 20rpx constant(safe-area-inset-bottom);
    padding: 10rpx 20rpx env(safe-area-inset-bottom);
    &-title {
      margin: 5rpx 0;
      font-size: var(--font-size-xs);
      color: var(--text-color-dark);
    }
    &-list {
      display: flex;
      flex-wrap: wrap;
      .emoji-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.28%;
        &__text {
          font-size: 60rpx;
        }
      }
    }
  }

  .btn_del {
    position: fixed;
    right: 120rpx;
    bottom: 10rpx;
    width: 96rpx;
    height: 89rpx;
  }
</style>
